<template>
    <customNavigationBar title="邀请好友" />

    <view class="page">
        <view class="shareCard">
            <view class="mainImg">
                <image class="bg" src="/static/home/share_bg.png" mode="widthFix"></image>

                <view class="userInfo">
                    <image :src="userInfo.avatar" mode="aspectFill"></image>
                    <view class="name">{{ userInfo.nickName }}</view>
                </view>
            </view>

            <view class="codeBox">
                <view class="text">
                    <view>悦居帮手</view>

                    <view>扫码加入悦居帮手</view>
                </view>

                <view class="QRcode">
                    <image :src="QRCode" mode="aspectFit"></image>
                </view>
            </view>
        </view>

        <!-- <view class="shareBox">
            <image v-for="item in shareType" :key="item.type" :src="item.icon"></image>
        </view> -->
    </view>

    <view class="submit">
        <view @click="saveImage">保存二维码</view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { userApis } from '@/utils/apis';

const userInfo = ref(null);
onShow(() => {
    userInfo.value = JSON.parse(uni.getStorageSync('userInfomation'));
    getData();
});

const QRCode = ref(null);
const getData = async () => {
    let res = await userApis.getQRCode();
    QRCode.value = 'data:image/jpg;base64,' + res.data;
};

const saveImage = () => {
    const bitmap = new plus.nativeObj.Bitmap('test');
    bitmap.loadBase64Data(
        QRCode.value,
        function () {
            const url = '_doc/' + new Date().getTime() + '.png';
            console.log('saveHeadImgFile', url);
            bitmap.save(
                url,
                {
                    overwrite: true // 是否覆盖
                },
                (i) => {
                    uni.saveImageToPhotosAlbum({
                        filePath: url,
                        success: function () {
                            uni.showToast({
                                title: '二维码保存成功',
                                icon: 'none'
                            });
                            bitmap.clear();
                        }
                    });
                },
                (e) => {
                    uni.showToast({
                        title: '二维码保存失败',
                        icon: 'none'
                    });
                    bitmap.clear();
                }
            );
        },
        (e) => {
            uni.showToast({
                title: '二维码保存失败',
                icon: 'none'
            });
            bitmap.clear();
        }
    );
};

const shareType = ref([
    {
        icon: '/static/home/share_icon1.png',
        type: '微信'
    },
    {
        icon: '/static/home/share_icon2.png',
        type: '微信朋友圈'
    },
    {
        icon: '/static/home/share_icon3.png',
        type: 'QQ'
    },
    {
        icon: '/static/home/share_icon4.png',
        type: '链接'
    }
]);
</script>
<style lang="scss">
page {
    background-color: #f2f3f5;
}
</style>

<style lang="scss" scoped>
.page {
    padding: 24rpx;
    padding-bottom: calc(120rpx + env(safe-area-inset-bottom));

    .shareCard {
        .mainImg {
            width: 100%;
            position: relative;
            .bg {
                width: 100%;
                vertical-align: bottom;
            }
            .userInfo {
                position: absolute;
                top: 70rpx;
                left: 60rpx;
                image {
                    width: 92rpx;
                    height: 92rpx;
                    border-radius: 50%;
                    background-color: #fff;
                }
                .name {
                    margin-top: 20rpx;
                    font-size: 32rpx;
                    color: #ffffff;
                }
            }
        }

        .codeBox {
            width: 100%;
            height: 234rpx;
            background: #ffffff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 32rpx;
            .text {
                font-size: 28rpx;
                color: #333333;
                line-height: 40rpx;
                view {
                    margin-bottom: 68rpx;
                }
                view:last-child {
                    margin: 0;
                }
            }
            .QRcode {
                width: 176rpx;
                height: 176rpx;
                background: #dedede;
                image {
                    width: 176rpx;
                    height: 176rpx;
                }
            }
        }
    }
    .shareBox {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 66rpx 40rpx;
        image {
            width: 80rpx;
            height: 80rpx;
        }
    }
}

.submit {
    position: fixed;
    bottom: env(safe-area-inset-bottom);
    left: 0;
    width: 100%;
    padding: 30rpx 24rpx;
    background-color: #fff;
    view {
        width: 100%;
        height: 80rpx;
        background: #2c72ff;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        font-weight: 400;
        font-size: 28rpx;
        color: #ffffff;
        line-height: 80rpx;
        text-align: center;
    }
}
</style>
